<template>
  <div>
    <ul class="clearfix">
      <li>
        <router-link to="/sanDianLin/xtx">新特性</router-link>
      </li>
      <li>
        <router-link to="/sanDianLin/smzq">生命周期</router-link>
      </li>
      <li>
        <router-link to="/sanDianLin/qjsxfz">全局方法封装使用</router-link>
      </li>
      <li>
        <router-link to="/sanDianLin/sxbd">v-model双向绑定</router-link>
      </li>
      <li>
        <router-link to="/sanDianLin/mbzdref">模板中的ref</router-link>
      </li>
    </ul>
    <ul class="clearfix">
      <li>
        <router-link to="/sanDianLin/zdsx">只读数据 readonly</router-link>
      </li>
      <li>
        <router-link to="/sanDianLin/jssx">计算属性</router-link>
      </li>
      <li>
        <router-link to="/sanDianLin/jk">监控</router-link>
      </li>
    </ul>
    <ul class="clearfix">
      <li>
        <router-link to="/sanDianLin/lytz">路由跳转</router-link>
      </li>
      <li>
        <router-link to="/sanDianLin/hslytz">函数路由跳转</router-link>
      </li>
      <li>
        <router-link to="/sanDianLin/fztx">父子通信</router-link>
      </li>
    </ul>
    <!-- <router-view/> -->
  </div>
</template>

<script>
import { reactive, ref, toRefs } from 'vue';
export default {
  name: '',
  // 定义模板 
  components: {},
  //在创建组件之前执行。
  setup(props, context) {
    const state = reactive({
      name: 'vue3.0',
    });
    const num = ref(0);
    return {
      ...toRefs(state),
      num,
    }
  }
}

</script>
<style scoped lang ='less'>
ul {
  margin-top: 30px;
}
ul li {
  float: left;
  margin: 4px 10px;
  list-style: none;
}
a {
  color: #000;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
</style>